<template>
  <div class="ticketList-box">
    <div class="ticketList-top-btn">
      <el-button @click="ticketEdit('','add')" icon="el-icon-check">发布门票</el-button>
    </div>
    <el-table empty-text="赶快发布一张门票吧~" v-loading="loadingTable" element-loading-text="拼命加载中" :data="$store.state.ticketList" border style="width: 100%;height:auto">
      <el-table-column align="center" label="图片" show-overflow-tooltip>
        <template slot-scope="scope">
          <img :src="scope.row.ticketUrl" alt="" width="60" height="60" style="margin:0 auto">
        </template>
      </el-table-column>
      <el-table-column width="180" align="center" label="部门ID票名日期" show-overflow-tooltip>
        <template slot-scope="scope">
          <p class="cellPLeft">
            <span>部门ID:{{ scope.row.deptId }}</span>
          </p>
          <p class="cellPLeft">
            <span>{{scope.row.tTypeName}}</span>
            <span style="margin-left:4px">{{ scope.row.tTypeDate }}</span>
          </p>
        </template>
      </el-table-column>
      <el-table-column align="center" label="地址权益" width="120" show-overflow-tooltip>
        <template slot-scope="scope">
          <p class="cellPLeft">{{scope.row.address}}</p>
          <p class="cellPLeft">{{ scope.row.purpose }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="sprice" align="center" label="价格" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="tSum" align="center" label="剩余库存" show-overflow-tooltip></el-table-column>
      <el-table-column prop="inum" align="center" label="原库存" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" label="总销量" show-overflow-tooltip>
        <template slot-scope="scope">
          <p>{{ scope.row.snum || 0 }}</p>
        </template>
      </el-table-column>
      <el-table-column width="160" align="center" label="发布时间" show-overflow-tooltip>
        <template slot-scope="scope">
          <p> {{$moment(scope.row.createDate,'YYYY-MM-DD HH:mm')}} </p>
        </template>
      </el-table-column>

      <!-- <el-table-column width="160" align="center" label="更新时间">
        <template slot-scope="scope">
          <p>{{ scope.row.updateDate  }}</p>
        </template>
      </el-table-column>
      <el-table-column width="126" prop="tDescribe" align="center" label="入场时间">
      </el-table-column>
      <el-table-column width="96" prop="tableName" align="center" label="报名字段">
      </el-table-column>
      <el-table-column prop="url" align="center" label="移动链接">
        <template slot-scope="scope">
          <input type="text" v-if="scope.row.url" style=" opacity: 0;width:0px" v-model="scope.row.url">
          <el-button v-if="scope.row.url" v-clipboard:copy="scope.row.url" v-clipboard:success="onCopy" v-clipboard:error="onError" type="text">复制链接</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="pcUrl" align="center" label="PC链接">
        <template slot-scope="scope">
          <input type="text" v-if="scope.row.pcUrl" style=" opacity: 0;width:0px" v-model="scope.row.pcUrl">
          <el-button v-if="scope.row.pcUrl" v-clipboard:copy="scope.row.pcUrl" v-clipboard:success="onCopy" v-clipboard:error="onError" type="text">复制链接</el-button>
        </template>
      </el-table-column> -->

      <el-table-column align="center" width="160" label="排它" show-overflow-tooltip>
        <template slot-scope="scope">
          <div class="exclusive">
            <div style="max-height: 20px;" class="left-text">
              <p style="max-width:160px; " class="one-txt-cut" v-for="(it,ind) of initPaiTaFun(scope.row)" :key="ind">{{ it }}</p>
            </div>
            <div class="el-icon-edit-outline" style="font-size:20px;padding-left:10px;cursor:pointer;" @click="paiOtherFormFun(scope.row)"></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="136" align="center" label="单订单限购数量" show-overflow-tooltip>
        <template slot-scope="scope">
          <div>{{scope.row.limitNum?scope.row.limitNum:"不限"}}</div>
          <div @click="limitNumObj.limitNum=scope.row.limitNum||0;limitNumObj.ticketTypeId=scope.row.ticketTypeId;limitNumAlert=true" class="el-icon-edit-outline" style="font-size:20px;padding-left:10px;cursor:pointer;"></div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="180" align="center" label="操作" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button @click="ticketEdit(scope.row,'edit')" style="color:#00B2A9" type="text">编辑</el-button>
          <el-button @click="soldOutPriceGroupInum(scope.row.ticketTypeId)" style="color:#F56C6C" type="text">售罄</el-button>
          <!-- <el-button v-if="scope.row.snum == '0'" @click="ticketDel(scope.row)" style="color:#F56C6C" type="text">删除</el-button> -->
          <el-button v-if="!scope.row.snum" @click="ticketDel(scope.row)" style="color:#F56C6C" type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 排它 -->
    <el-dialog title="排它设置" :visible.sync="paiOtherAlert">
      <el-table ref="multipleTable" border @selection-change="handleSelectionChange" :data="paiOtherForm">
        <el-table-column type="selection" width="66" align="center">
        </el-table-column>
        <el-table-column prop="ticketTypeId" align="center" label="ID"></el-table-column>
        <el-table-column prop="tTypeName" align="center" label="票种"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="paiOtherAlert = false">取 消</el-button>
        <el-button type="primary" :loading="lodingPaiTai" @click="subpaiOtherFun()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="单订单限购数量" :visible.sync="limitNumAlert">
      <div style="width:100%">
        <el-input-number style="width:100%" v-model="limitNumObj.limitNum" controls-position="right" :min="0"></el-input-number>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="limitNumAlert = false">取 消</el-button>
        <el-button :loading="lodingPaiTai" @click="surelimitNum()" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import GetDataFun from "./../js/GetDataFun.js"; //得到一些数据的方法
import service from "@/api/priceGroup";
export default {
  data() {
    return {
      limitNumObj: {
        ticketTypeId: "",
        limitNum: ""
      },
      limitNumAlert: false,
      paiOtherAlert: false, // 排它
      lodingPaiTai: false,
      loadingTable: false, //表格
      EditTicket: "", //当前编辑的票
      selectPaiOther: [],
      startDate: "",
      endDate: "",
      paiOtherForm: [] // 排它数据
    };
  },
  computed: {
    ticketList() {
      return this.$store.state.ticketList;
    }
  },
  watch: {
    ticketList(val) {
      // this.queryTicketTypeTotalPriceByTicketTypeId();
    }
  },
  created() {
    this.getTickedList();
  },
  methods: {
    async queryTicketTypeTotalPriceByTicketTypeId() {
      // const ticketList = this.$store.state.ticketList;
      // for (let i = 0; i < ticketList.length; i++) {
      //   const {
      //     data = []
      //   } = await service.queryTicketTypeTotalPriceByTicketTypeId({
      //     ticketTypeId: ticketList[i].ticketTypeId,
      //     activityId: this.$store.state.activityId
      //   });
      //   console.log(data);
      // }
    },
    async surelimitNum() {
      this.lodingPaiTai = true;
      let subData = {
        activityId: this.$store.state.activityId,
        ...this.limitNumObj
      };
      if (!this.limitNumObj.limitNum) {
        delete subData.limitNum;
      }
      const { success = false } = await service.setOneTicketLimitNum(subData);
      this.lodingPaiTai = false;
      if (success) {
        this.$message({
          message: "设置成功",
          type: "success"
        });
        this.limitNumAlert = false;
        this.getTickedList();
      }
    },
    // 初始化排它
    initPaiTaFun(scopeRow) {
      let subData = [];
      let ticketIdList = [];
      if (scopeRow.exclusive) {
        ticketIdList = JSON.parse(scopeRow.exclusive);
        for (let i = 0; i < ticketIdList.length; i++) {
          for (let j = 0; j < this.$store.state.ticketList.length; j++) {
            if (
              ticketIdList[i].ticketTypeId ==
              this.$store.state.ticketList[j].ticketTypeId
            ) {
              subData.push(this.$store.state.ticketList[j].tTypeName);
            }
          }
        }
      }
      return subData;
    },
    //排他
    paiOtherFormFun(scopeRow) {
      this.paiOtherForm = [];
      for (let i = 0; i < this.$store.state.ticketList.length; i++) {
        if (
          this.$store.state.ticketList[i].ticketTypeId != scopeRow.ticketTypeId
        ) {
          this.paiOtherForm.push(this.$store.state.ticketList[i]);
        }
      }
      this.EditTicket = scopeRow;
      this.paiOtherAlert = true;

      // 选中
      let ticketIdList = [];
      let selectData = [];
      if (scopeRow.exclusive) {
        ticketIdList = JSON.parse(scopeRow.exclusive);
        for (let i = 0; i < ticketIdList.length; i++) {
          for (let j = 0; j < this.paiOtherForm.length; j++) {
            if (
              ticketIdList[i].ticketTypeId == this.paiOtherForm[j].ticketTypeId
            ) {
              selectData.push(this.paiOtherForm[j]);
            }
          }
        }
      }
      setTimeout(() => {
        this.toggleSelection(selectData);
      }, 1000);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //选了的排它设置
    handleSelectionChange(val) {
      this.selectPaiOther = val;
    },
    soldOutPriceGroupInum(ticketTypeId) {
      this.$confirm("您确定是否要进行门票售罄, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.suresoldOutPriceGroupInum(ticketTypeId);
        })
        .catch(() => {});
    },
    async suresoldOutPriceGroupInum(ticketTypeId) {
      const { success = false } = await service.soldOutPriceGroupInum({
        ticketTypeId: ticketTypeId,
        activityId: this.$store.state.activityId
      });
      if (success) {
        this.$message({
          type: "success",
          message: "设置成功"
        });
        this.getTickedList();
      }
    },
    // 提交排他设置
    subpaiOtherFun() {
      let selectData = [];
      for (let i = 0; i < this.selectPaiOther.length; i++) {
        selectData.push({
          ticketTypeId: this.selectPaiOther[i].ticketTypeId,
          tTypeName: this.selectPaiOther[i].tTypeName
        });
      }
      this.EditTicket.exclusive = JSON.stringify(selectData);
      let subData = {
        activityId: this.$store.state.activityId,
        exclusive: this.EditTicket.exclusive,
        ticketTypeId: this.EditTicket.ticketTypeId
      };
      this.lodingPaiTai = true;
      this.$http
        .post("/api/isv/ticketPurchasePC/updateTicketInfo", subData)
        .then(
          res => {
            this.lodingPaiTai = false;
            if (res.data.success) {
              this.$message({
                message: "提交成功",
                type: "success"
              });
              this.paiOtherAlert = false;
              this.getTickedList();
            } else {
              this.$message({
                message: res.data.errorMsg || "数据提交失败",
                type: "warning"
              });
            }
          },
          err => {
            this.lodingPaiTai = false;
            this.$message.error("服务器出小差了");
          }
        );
    },
    // 发布门票和编辑
    ticketEdit(ticketD, e) {
      sessionStorage.setItem("ticketD", JSON.stringify(ticketD));
      this.$router.push({
        name: "ticketRelease",
        params: {
          ticketD: ticketD
        }
      });
    },
    onCopy: function() {
      this.$message({
        type: "success",
        message: "复制成功"
      });
    },
    onError: function() {
      this.$message.error("复制失败");
    },
    // 删除数据
    ticketDel(ticketD) {
      this.$confirm("您确定是否要进行删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let subData = {
            activityId: ticketD.activityId,
            ticketTypeId: ticketD.ticketTypeId
          };
          this.$http.post("/api/isv/ticketType/delTicketType", subData).then(
            res => {
              if (res.data.success) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.getTickedList();
              } else {
                this.$message({
                  message: res.data.errorMsg || "删除失败",
                  type: "warning"
                });
              }
            },
            err => {
              this.$message.error("服务器出小差了");
            }
          );
        })
        .catch(() => {});
    },
    getTickedList() {
      this.loadingTable = true;
      GetDataFun.getTicketList().then(res => {}, err => {});
      this.loadingTable = false;
    }
  }
};
</script>

<style scoped>
.ticketList-box {
  width: 100%;
  min-height: 200px;
  background: #fff;
  border-radius: 6px;
  padding: 16px 26px;
}
.exclusive {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ticketList-top-btn {
  width: 100%;
  height: auto;
  margin: 10px 0px 20px 0px;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-items: center;
  align-items: center;
}
.cellPLeft {
  text-align: left;
  width: 100%;
}
.table_content .el-table th {
  background-color: #f9f9f9 !important;
}
</style>
